<template>
  <div class="searchlist">
    <!-- 头部搜索 -->
    <div class="my_header">
      <div class="goback">
        <i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="goBack()"></i>
      </div>
      <div class="my_input">
        <img class="my_img" src="static/icon_pc/icon/search_9.png" alt="">
        <input type="text" v-model="keyword" placeholder="请输入搜索关键词">
      </div>
      <div slot="action" class="cancel" @click="search('search')">搜索</div>
    </div>

    <!-- 合计 -->
    <div class="total" v-show="showType!=='creditCertificate'">
      <div class="tol">
        <span class="all">合计：<span class="peo">{{resultTotal}}条</span></span>
      </div>
    </div>

    <blacklist v-show="showType==='blacklist'" :blacklistInfo="blacklistInfo" :keyword="keyword"
               :type="type"></blacklist>
    <whitelist v-show="showType==='whitelist'" :whitelistInfo="whitelistInfo"
               @showCreditCertificate="showCreditCertificate"></whitelist>
    <credit-certificate v-show="showType==='creditCertificate'" :whitelistInfo="whitelistInfo"
                        ref="creditCertificate" :keyword="keyword" @setInfo="setWhitelistInfo"></credit-certificate>
  </div>
</template>

<script>
  import blacklist from './component/list-blacklist';
  import whitelist from './component/list-whitelist';
  import creditCertificate from './component/list-creditCertificate';

  export default {
    data() {
      return {
        keyword: '',  //搜索关键字
        type: '1',  //是否免费,0收费，1免费
        showType: '',  //显示类型，根据类型选择显示白名单，黑名单或者征信证书
        resultTotal: 0,     //结果总数
        whitelistInfo: {},
        blacklistInfo: [],
        // defaultInfo:{} //默认的头像姓名信息
      }
    },
    components: {blacklist, whitelist, creditCertificate},
    created() {
      this.keyword = this.$route.query.keyword;
      this.type = this.$route.query.type;
      if (this.keyword) {
        this.search();
      }
    },
    methods: {
      goBack() {   //返回上一页
        this.$router.go(-1);
      },
      search(getData) {   //搜索
        if (getData) {    //是否需要查询次数检验
          this.$http.get('api/Welcome/user').then(response => {
            if (response.data.inquiry != 0) {
              this.searchSure(getData);
            } else {
              this.$toast({
                message: "查询次数不足，请购买套餐",
                duration: 1000
              });
              this.$router.push({
                path: "./nulls",
                query: {
                  tabitem: "paied",

                }
              });
            }
          })
        } else {
          this.searchSure();
        }
      },
      searchSure(getData) {   //真正的搜索
        this.$http.get('api/Search/search', {keyword: this.keyword, type: getData ? '0' : this.type}).then(response => {
          console.log('获取到的信息');
          console.log(response);
          if (response.code == 201) { //白名单
            // this.showType = 'whitelist';
            this.whitelistInfo = response.data;
            setTimeout(() => {
              this.showCreditCertificate();
            }, 300)
          } else if (response.code == 200) {  //黑名单
            this.showType = 'blacklist';
            this.blacklistInfo = response.data.lost_list;
            this.resultTotal = response.data.total;
          }
          this.$router.push({
            path: './searchlist',
            query: {
              keyword: this.keyword,
              type: 1,
            }
          });
        }).catch(error => {

        });
      },
      showCreditCertificate(userInfo) {    //显示征信证书
        this.showType = 'creditCertificate';
        this.$refs.creditCertificate.domToImage(userInfo);
      },
      setWhitelistInfo() {    //重新选择头像姓名
        this.showType = 'whitelist';
        // this.$refs.whitelist.domToImage();
      }
    }
  }
</script>

<style scoped>
  /* 头部 */

  .searchlist .my_header {
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    /* text-align: center; */
    line-height: 0.88rem;
    color: #fff;
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 0;
    padding: 0 0.2rem;
    color: #ffffff;
  }

  .searchlist .my_header .cancel {
    color: #ffffff;
  }

  .searchlist .my_header i {
    font-size: 0.4rem;
    float: left;
    line-height: 0.88rem;
  }

  .searchlist .top1 {
    height: 0.88rem;
    line-height: 0.88rem;
  }

  .searchlist .goback {
    float: left;
  }

  .searchlist .my_input {
    width: 80%;
    float: left;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: center;
    background-color: rgba(0, 133, 240, 1);
    position: relative;
  }

  .searchlist .my_input input {
    height: 0.52rem;
    color: #333;
    font-size: 0.24rem;
    margin-bottom: 0;
  }

  .searchlist input[type="text"] {
    padding-top: 0.2rem;
    padding-left: 0.5rem;
  }

  .searchlist .my_img {
    width: 0.24rem;
    height: 0.24rem;
    position: absolute;
    left: 0.2rem;
    top: 0.34rem;
  }

  .searchlist .headcircle {
    width: 1.2rem;
    height: 1.2rem;
    text-align: center;
    margin: 0px auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    /* Firefox */
    -webkit-border-radius: 50%;
    /* Safari 和 Chrome http://www.manongjc.com/article/1214.html */
  }

  @media screen and (width: 320px) {
    .certificate .name > input {
      top: 30%;
    }
  }

  .searchlist .isdisplay {
    display: block !important;
  }

  .searchlist #ser {
    font-size: 0.28rem;
    position: absolute;
    left: 15%;
    color: #ccc;
  }

  .cancel {
    font-size: 0.28rem;
    font-weight: 500;
    color: #fff;
    float: right;
    padding-right: 0.1rem;
  }

  .searchlist {
    background-color: #fff;
  }

  /* 总计 */

  .havedata {
    /*display: none;*/
  }

  .total {
    height: 0.88rem;
    margin-top: 0.88rem;
    background-color: #fff;
    line-height: 0.88rem;
    padding: 0 0.3rem;
    border-bottom: 0.01rem solid #ccc;
  }

  .havedata .total .tol {
    float: left;
  }

  .havedata .all {
    font-size: 0.28rem;
    color: #999;
  }

  .havedata .all .peo {
    color: #333;
  }

  .havedata .total .area {
    float: right;
  }

  .havedata .area span {
    font-size: 0.28rem;
    color: #0085f0;
  }

  /* 员工信息 */

  .havedata .info {
    margin-top: 0.3rem;
  }

  .havedata .infor {
    width: 92%;
    height: 1.7rem;
    background-color: #fff;
    border: 0.01rem solid #ccc;
    margin: 0 auto;
    padding: 0.2rem;
    position: relative;
    border-bottom: 1px solid #ccc !important;
  }

  .havedata .infor:nth-child(2) {
    border-top: 0;
    border-bottom: 0;
  }

  .havedata .infor div {
    height: 0.45rem;
    font-size: 0.26rem;
    color: #999;
  }

  .havedata .infor .xinxi {
    color: #333;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 180px;
  }

  /* 查看详情 */

  .havedata .detail {
    display: inline-block;
    width: 0.64rem;
    height: 1.7rem;
    position: absolute;
    right: 0;
    top: 0;
  }

  .havedata .detail .cont {
    width: 0.26rem;
    height: 1.7rem;
    line-height: 15px;
    font-size: 0.26rem;
    color: #0085f0;
    padding: 0.25rem 0.15rem;
    border-left: 0.001rem solid #ccc;
  }

  /* 员工信息2 */

  .havedata .info2 {
    margin: 0.3rem 0;
  }

  .havedata .info2 .inform {
    border-bottom: 0.01rem solid #ccc;
  }

  /*黑名单样式*/

  .certificate {
    background-color: #f8f8f8;
    /*display: none;*/
  }

  /* 总计 */

  .certificate .area span {
    font-size: 0.28rem;
    color: #0085f0;
  }

  /* 查询结果 */

  .certificate .serresult {
    height: 0.88rem;
    margin-top: 0.2rem;
    line-height: 0.88rem;
    padding: 0 0.3rem;
    background-color: #fff;
  }

  .certificate .result {
    /* margin-top: .88rem; */
    font-size: 0.28rem;
    color: #0085f0;
    font-weight: 500;
    font-family: PingFang-SC-Medium;
  }

  .result span {
    font-size: 0.34rem;
    color: #f40a0a;
    font-weight: 500;
    font-family: PingFang-SC-Medium;
  }

  /* 输入证书信息 */

  .certificate .zsinfo {
    position: relative;
  }

  .certificate .zsinfo h5 {
    color: #999;
    font-size: 0.28rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    padding: 0 0.3rem;
    margin: 0;
    padding-top: 0.41rem;
    margin-bottom: 0.24rem;
  }

  /* 头像 */

  .certificate .touxiang {
    height: 1.4rem;
    border-bottom: 0.001rem solid #ccc;
    background-color: #fff;
  }

  .certificate .padd-right {
    padding-right: 0.25rem;
    line-height: 1.4rem;
    background-color: #fff;
    overflow: hidden;
  }

  .certificate .namexm input {
    width: 50%;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: right;
    position: absolute;
    right: 0.2rem;
    border: none;
  }

  .certificate .padd-name {
    height: 0.88rem;
    background-color: #fff;
    line-height: 0.88rem;
  }

  .certificate .padd-left {
    font-size: 0.3rem;
    color: #333;
    font-weight: 500;
    padding-left: 0.3rem;
  }

  .certificate .name {
    font-size: 0.25rem;
    color: #666;
    float: right;
    width: 16%;
    height: 1.4rem;
  }

  .certificate .name img {
    width: 1rem;
    height: 1rem;
  }

  .certificate .name > input {
    border: none;
    padding-top: 0.3rem;
    text-align: right;
    width: 19%;
    height: 1.5rem;
    position: absolute;
    right: 0.2rem;
    opacity: 0;
  }

  /* 默认使用账户信息 */

  .certificate .countinfo {
    font-size: 0.26rem;
    color: #0085f0;
    padding-right: 0.27rem;
    bottom: -65%;
    right: 0;
    position: absolute;
  }

  /* 生成征信证书 */

  .certificate .button {
    text-align: center;
    margin-top: 25%;
    color: #ffffff;
  }

  .certificate .btn {
    width: 93.33%;
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    border-radius: 0.15rem;
  }

  /*生成绿卡区域*/

  .lvka {
    background-color: #fff;
    /*display: none;*/
    height: 100%;
  }

  /* 职场绿卡 */

  .lvka .green {
    width: 6.85rem;
    height: 9.55rem;
    background: url("../../../static/icon_pc/icon/pic_certificate.png");
    background-size: 6.85rem 9.55rem;
    margin: 0.43rem auto;
    position: relative;
  }

  .lvka .people {
    text-align: center;
    padding-top: 32%;
  }

  .lvka .people img {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50% !important;
  }

  .lvka .people h3 {
    font-size: 0.3rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(1, 1, 1, 1);
    line-height: 0.4rem;
  }

  /* 文字 */

  .lvka .font {
    width: 5.72rem;
    height: 2.37rem;
    margin: 0 auto;
    margin-top: 0.8rem;
  }

  .lvka .font p {
    font-size: 0.26rem;
    color: #666;
    text-indent: 2em;
    line-height: 22px !important;
  }

  .lvka .youxiu {
    color: #f40a0a;
    font-size: 0.3rem;
    font-weight: 500;
  }

  .lvka .advantage {
    color: #0085f0;
    font-size: 0.26rem;
  }

  /* 二维码 */

  .lvka .ewm {
    position: absolute;
    bottom: 0.5rem;
    left: 0.46rem;
  }

  .lvka .ewm img {
    width: 1.3rem;
    height: 1.3rem;
  }

  /* 署名 */

  .lvka .name {
    position: absolute;
    bottom: 0.5rem;
    right: 0.63rem;
    text-align: right;
  }

  /* 长按保存图片 */

  .lvka h4 {
    font-size: 0.26rem;
    color: #999;
    text-align: center;
    margin-bottom: 0.57rem;
  }
</style>
